// flex布局
.flex {
  display: flex;
}

// 默认flex row布局
.flex-row-normal {
  .flex();
  justify-content: flex-start;
  align-items: flex-start;
}

// flex row布局 副轴居中
.flex-row-start {
  .flex();
  justify-content: flex-start;
  align-items: center;
}

// flex row布局 沉底
.flex-row-end {
  .flex();
  justify-content: flex-end;
  align-items: center;
}

// flex row布局 space-between
.flex-row-spacebetween {
  .flex();
  justify-content: space-between;
  align-items: center;
}

// flex row布局 space-around
.flex-row-spacearound {
  .flex();
  justify-content: space-around;
  align-items: center;
}

// flex row布局 space-evenly
.flex-row-spaceevenly {
  .flex();
  justify-content: space-evenly;
  align-items: center;
}

// flex row布局 副轴拉伸
.flex-row-stretch {
  .flex();
  justify-content: flex-start;
  align-items: stretch;
}

// flex row布局 居中
.flex-row-center {
  .flex();
  justify-content: center;
  align-items: center;
}

// 默认flex column布局
.flex-column-normal {
  .flex-row-normal();
  flex-direction: column;
}

// flex column布局 副轴居中
.flex-column-start {
  .flex-row-start();
  flex-direction: column;
}

// flex column布局 沉底
.flex-column-end {
  .flex-row-end();
  flex-direction: column;
}

// flex column布局 space-between
.flex-column-spacebetween {
  .flex-row-spacebetween();
  flex-direction: column;
}

// flex column布局 space-around
.flex-column-spacearound {
  .flex-row-spacearound();
  flex-direction: column;
}

// flex column布局 space-evenly
.flex-column-spaceevenly {
  .flex-row-spaceevenly();
  flex-direction: column;
}

// flex column布局 副轴拉伸
.flex-column-stretch {
  .flex-row-stretch();
  flex-direction: column;
}

// flex column布局 居中
.flex-column-center {
  .flex-row-center();
  flex-direction: column;
}

// margin 10
.m-10 {
  margin: 10px;
}

// margin-left 10
.ml-10 {
  margin-left: 10px;
}

// margin-right 10
.mr-10 {
  margin-left: 10px;
}

// margin 0 10
.m-0-10 {
  margin: 0 10px;
}

// margin 20
.m-20 {
  margin: 20px;
}

// margin-left 20
.ml-20 {
  margin-left: 20px;
}

// margin-right 20
.mr-20 {
  margin-left: 20px;
}

// margin 0 20
.m-0-20 {
  margin: 0 20px;
}

// margin 30
.m-30 {
  margin: 30px;
}

// margin-left 30
.ml-30 {
  margin-left: 30px;
}

// margin-right 30
.mr-30 {
  margin-left: 30px;
}

// margin 0 30
.m-0-30 {
  margin: 0 30px;
}

// padding 10
.p-10 {
  padding: 10px;
}

// padding-left 10
.pl-10 {
  padding-left: 10px;
}

// padding-right 10
.pr-10 {
  padding-left: 10px;
}

// padding 0 10
.p-0-10 {
  padding: 0 10px;
}

// padding 20
.p-20 {
  padding: 20px;
}

// padding-left 20
.pl-20 {
  padding-left: 20px;
}

// padding-right 20
.pr-20 {
  padding-left: 20px;
}

// padding 0 20
.p-0-20 {
  padding: 0 20px;
}

// padding 30
.p-30 {
  padding: 30px;
}

// padding-left 30
.pl-30 {
  padding-left: 30px;
}

// padding-right 30
.pr-30 {
  padding-left: 30px;
}

// padding 0 30
.p-0-30 {
  padding: 0 30px;
}

// 单行溢出省略号
.text-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 可点击对象
.clickable {
  cursor: pointer;
  user-select: none;
}